<template>
  <!-- <div> -->
  <a-popover :placement="popPosition" trigger="click" v-model="visible">
    <template slot="content">
      <ul class="content-tag">
        <li @click="handleAddTag">添加标签</li>
        <li @click="handleUpdateTag" v-if="showUpdate">编辑标签</li>
        
      </ul>
    </template>
    <div class="day-wrap" :class="{ 'no-work': dayData.status == 0 }" @click.stop="handleShowAdd()">
      <div class="day-tag-item" >
        <a-badge v-if="dayData.status == 1" status="success" text="正常" />
        <a-badge v-else-if="dayData.status == 2" status="warning" :text="`迟到${dayData.lateTime}分钟`" />
        <a-badge v-else-if="dayData.status == 3" status="warning" text="上班缺卡" />
        <a-badge v-else-if="dayData.status == 4" status="warning" text="下班缺卡" />
        <a-badge v-else-if="dayData.status == 5" status="error" text="旷工" />
        <a-badge v-else-if="dayData.status == 0" color="#ccc" text="休息" />
      </div>
      <div class="day-tag-item can-hover" v-for="it in dayData.content" :key="it.id" @click.stop="handleShowUpdate(it)"><a-badge color="#ccc" :text="it.content" /></div>
    </div>
  </a-popover>
  <!-- <work-modal :visible="visible"></work-modal> -->
  <!-- </div> -->
</template>

<script>
import WorkModal from './modal'

export default {
  data() {
    return {
      visible: false,
      showUpdate:false,
      showItem:{}
    }
  },

  components: {
    WorkModal,
  },
  props: {
    dayData: {
      type: Object,
      default: () => {
        return {}
      },
    },
    dayValue: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  mounted() {},
  computed: {
    popPosition: function () {
      if (this.dayValue.day() == 0) {
        return 'leftTop'
      } else {
        return 'rightTop'
      }
    },
  },
  watch: {},
  methods: {
    handleAddTag(){
      this.visible = false;
      this.$emit('add', this.dayValue)
    },
    handleShowAdd(){
       this.visible = true;
       this.showUpdate = false
    },
    handleShowUpdate(a_it){
      this.showUpdate = true
      this.visible = true;
      this.showItem = a_it
    },
    handleUpdateTag(){
      this.visible = false;
      this.$emit('update', this.showItem, this.dayValue)
    },
    showClick(){
      console.log(111)
    }
  },
  destroyed() {},
}
</script>
<style lang='less' scoped>
.day-wrap {
  height: 80px;
  width: 100%;
  
  position: relative;
  display: flex;
  // align-items: center;
  justify-content: center;
  // flex-wrap: wrap;
  flex-direction: column;
  overflow-y: auto;
  .time {
    position: absolute;
    top: 5px;
    right: 10px;
    line-height: 20px;
  }
  &.no-work {
    background-color: #e9e9e9;
  }
  &.success {
    background-color: #52c41a;
  }
  &.warning {
    background-color: #faad14;
  }
  &.error {
    background-color: #f5222d;
  }
  .day-tag-item{
    padding: 2px 16px;
    &.can-hover:hover {
      background-color: #469beb;
      color: #fff;
      border-radius: 2px;
      &/deep/ .ant-badge .ant-badge-status-text{
        color: #fff;
      }
      // color: #fff;
    }
  }
}
.content-tag {
  margin: 0 -16px;
  min-width: 120px;
  li {
    line-height: 20px;
    padding: 5px 16px;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    &:hover {
      background-color: #e6f7ff;
      // color: #fff;
    }
  }
}
.ant-popover-content {
  /deep/ .ant-popover-arrow {
    display: none;
  }
}
</style>